<template>
	<view>
		
		<!-- 小程序顶部样式 -->
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">认证</block>
		</cu-custom>
		
		<view v-if="userInfo.auditStatus == 'CERTIFICATING'" class="bg-white">
			<view class="flex justify-center flex-direction align-center" style="height: 90vh;">
				<text style="font-size: 50rpx;color: #8F8F94;font-weight: bold;margin-bottom: 50rpx;">
					正在认证中
				</text>
			</view>
		</view>
		
		<view v-if="userInfo.auditStatus != 'CERTIFICATING'" class="">
			<view class="cu-form-group">
				<view class="title">姓名</view>
				<input @input="getInputName" placeholder="请输入真实姓名"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号码</view>
				<input @input="getInputMobile" placeholder="输入手机号码" name="input"></input>
				<button :disabled="!show" @tap="sendCode" class='cu-btn bg-green shadow'>
					<text v-show="!show">({{ count }})</text>验证码
				</button>
			</view>
			<view class="cu-form-group">
				<view class="title">验证码</view>
				<input @input="getInputCode" placeholder="请输入验证码" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">身份证号</view>
				<input @input="getInputIdCard" type="number" placeholder="请输入身份证号"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">认证类型</view>
				<picker @change="PickerChange" :value="pickerIndex" :range="picker">
					<view class="picker">
						{{pickerIndex>-1?picker[pickerIndex]:'请选择认证类型'}}
					</view>
				</picker>
			</view>
			<view>
				<view>
					<!-- 身份证正面照 -->
					<view class="cu-bar bg-white margin-top">
						<view class="action">
							请上传身份证正面照
						</view>
					</view>
					<view class="cu-form-group">
						<view class="grid col-4 grid-square flex-sub">
							<view class="bg-img" @tap="ViewImage(1)" v-if="imgFront">
							 <image :src="imgFront" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg(1)">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage(1)" v-if="!imgFront">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
				</view>
				<view>
					<!-- 身份证背面照 -->
					<view class="cu-bar bg-white">
						<view class="action">
							请上传身份证背面照
						</view>
					</view>
					<view class="cu-form-group">
						<view class="grid col-4 grid-square flex-sub">
							<view class="bg-img" @tap="ViewImage(2)" v-if="imgBack">
							 <image :src="imgBack" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg(2)">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage(2)" v-if="!imgBack">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
				</view>
				<view>
					<!-- 手持身份证照片 -->
					<view class="cu-bar bg-white">
						<view class="action">
							请上传手持身份证照
						</view>
					</view>
					<view class="cu-form-group">
						<view class="grid col-4 grid-square flex-sub">
							<view class="bg-img" @tap="ViewImage(3)" v-if="imgHandheld">
							 <image :src="imgHandheld" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg(3)">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage(3)" v-if="!imgHandheld">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<button :disabled="loading == true" @tap="attestation" class="cu-btn block bg-blue margin-tb-sm lg">
				<text :class="loading == true ? 'cuIcon-loading2' : ''" class=" cuIconfont-spin">
				</text> 
				立即认证
			</button>
		</view>
		
		
			
	</view>
</template>

<script>
	
	export default {
		components:{
		},
		data() {
			return {
				userInfo: {},
				picker: ['维修员', '商户', '代理'],
				pickerIndex: -1,
				loading: false,
				
				//验证码相关
				show: true,
				count: '',
				timer: null,
				
				// 提交数据内容
				name: '',
				mobile: '',
				code: '',
				idCard: '',
				auditType: -1,
				imgFront: '',
				imgBack: '',
				imgHandheld: '',
				// 服务器地址
				imgFrontPath: '',
				imgBackPath: '',
				imgHandheldPath: ''
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo")
		},
		methods: {
			async sendCode(){
				const TIME_COUNT = 60;
				if (!this.timer) {
					if(this.mobile && this.mobile.length == 11){
						await this.$api.getVerfication({mobile: this.mobile});
						this.count = TIME_COUNT;
						this.show = false;
						this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= TIME_COUNT) {
								this.count--;
							} else {
								this.show = true;
								clearInterval(this.timer);
								this.timer = null;
							}
						}, 1000)
					}else{
						uni.showToast({
							title: '请输入正确手机号',
							duration: 2000,
							icon: "none"
						});
					}
				}
			},
			getInputMobile(e){
				this.mobile = e.detail.value
			},
			getInputCode(e){
				this.code = e.detail.value
			},
			getInputName(e){
				this.name = e.detail.value
			},
			getInputIdCard(e){
				this.idCard = e.detail.value
			},
			attestation(){
				if(!this.name){
					uni.showToast({
						title: '请完善真实姓名！',
						icon: 'none',
						mask: false
					});
					return ;
				}
				if(!this.mobile){
					uni.showToast({
						title: '请输入手机号码！',
						icon: 'none',
						mask: false
					});
					return ;
				}
				if(!this.code){
					uni.showToast({
						title: '请输入验证码！',
						icon: 'none',
						mask: false
					});
					return ;
				}
				if(!this.idCard){
					uni.showToast({
						title: '请完善身份证信息！',
						icon: 'none',
						mask: false
					});
					return ;
				}
				if(this.auditType == -1){
					uni.showToast({
						title: '请选择认证类型！',
						icon: 'none',
						mask: false
					});
					return ;
				}
				if(!this.imgFrontPath || !this.imgBackPath || !this.imgHandheldPath ){
					uni.showToast({
						title: '请上传证件照！',
						icon: 'none',
						mask: false
					});
					return ;
				}
				let reqData = {
					auditType: this.auditType,
					name: this.name,
					idCard: this.idCard,
					imgFrontPath: this.imgFrontPath,
					imgBackPath: this.imgBackPath,
					imgHandheldPath: this.imgHandheldPath,
					mobile: this.mobile,
					code: this.code
				}
				
				this.loading = true
				this.$api.attestation(reqData).then((res)=>{
					this.loading = false;
					if(res.data.status == 200 && res.data.data == 1){
						// 修改用户审核状态
						const userInfo = uni.getStorageSync("userInfo")
						userInfo.auditStatus = 'CERTIFICATING'
						userInfo.mobile = this.mobile
						uni.setStorageSync("userInfo", userInfo)
						//请求成功，返回首页
						uni.reLaunch({
							url: '../main/main'
						})
					}else{
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							mask: false
						});
					}
				}).catch((err)=>{
					this.loading = false;
					console.log('request fail', err);
				})
				
			},
			toPage(){
				uni.reLaunch({
					url: '../main/main'
				})
			},
			PickerChange(e) {
				this.pickerIndex = e.detail.value
				this.auditType = Number(this.pickerIndex) + 1
			},
			ViewImage(type) {
				switch (type){
					case 1:
						uni.previewImage({
							urls: this.imgFront
						});
						break;
					case 2:
						uni.previewImage({
							urls: this.imgBack
						});
						break;
					case 3:
						uni.previewImage({
							urls: this.imgHandheld
						});
						break;
				}
			},
			ChooseImage(type) {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						
						switch (type){
							case 1:
								that.imgFront = res.tempFilePaths
								that.uploadImg(1, that.imgFront)
								break;
							case 2:
								that.imgBack = res.tempFilePaths
								that.uploadImg(2, that.imgBack)
								break;
							case 3:
								that.imgHandheld = res.tempFilePaths
								that.uploadImg(3, that.imgHandheld)
								break;
							default:
								break;
						}
						
					}
				});
			},
			uploadImg(type, filePath){
				//微信小程序只支持单张图片上传，选择的时候就直接上传
				let that = this
				let url = that.$api.baseUrl + '/kaxiu/imageUpload'
				uni.uploadFile({
					url: url,
					filePath: filePath[0],
					name: 'file',
					success: (uploadFileRes) => {
						const resData = JSON.parse(uploadFileRes.data).data
						switch (type){
							case 1:
								that.imgFrontPath = resData
								break;
							case 2:
								that.imgBackPath = resData
								break;
							case 3:
								that.imgHandheldPath = resData
								break;
						}
					}
				});
			},
			DelImg(type) {
				uni.showModal({
					title: '删除证件',
					content: '确定要删除吗？',
					cancelText: '再看看',
					confirmText: '是的',
					success: res => {
						if (res.confirm) {
							switch (type){
								case 1:
									this.imgFront = ''
									break;
								case 2:
									this.imgBack = ''
									break;
								case 3:
									this.imgHandheld = ''
									break;
								default:
									break;
							}
						}
					}
				})
			},
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

</style>
